@using Passwordless.AdminConsole.Components.Shared.ApexCharts.Serialization
@using Passwordless.AdminConsole.Components.Shared.ApexCharts.Models

@typeparam TXValueType
@typeparam TYValueType

<div id="@Id"></div>

<SecureScript type="module">
    let options = @((MarkupString)JsonSerializer.Serialize(Options, ApexChartJsonSerializer.Options));
    
    @switch (YAxisFormatting) {
        case LabelsFormattingTypes.Integer:
            @((MarkupString)"options.yaxis.labels.formatter = (value) => parseInt(value).toLocaleString();")
            break;
        case LabelsFormattingTypes.Double:
            @((MarkupString)"options.yaxis.labels.formatter = (value) => parseFloat(value).toFixed(2).toLocaleString();")
            break;
    }
    
    let chart = new ApexCharts(document.querySelector("#@Id"), options);    
    chart.render();
</SecureScript>

@code {
    
    [Parameter]
    public required string Id { get; set; }
    
    [Parameter]
    public required ApexChartOptions<TXValueType, TYValueType> Options { get; set; }
    
    [Parameter]
    public LabelsFormattingTypes? YAxisFormatting { get; set; }
}